<template>
    <div class="recordBox">
        <van-nav-bar title="提现记录" left-arrow @click-left="onClickLeft" />
        <van-steps direction="vertical" :active="active" style="border-bottom: 1px solid #f2f2f2;">
            <van-step style="height: 100px;">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <ul style="line-height: 50px;">
                        <li>
                            <h3 style="color: #d92109;">{{ moneyB }}元</h3>
                        </li>
                        <li>
                            <h3 style="color: #3087ea;">已提现</h3>
                        </li>
                    </ul>
                    <ul style="line-height: 50px;">
                        <li>
                            <h4 style="color: #000;">到账银行卡</h4>
                        </li>
                        <li>
                            <h4 style="color: #000;">建设银行 尾号 9276</h4>
                        </li>
                    </ul>
                </div>
            </van-step>
            <van-step style="height: 100px;">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <ul style="line-height: 50px;">
                        <li>
                            <h3 style="color: #d92109;">20元</h3>
                        </li>
                        <li>
                            <h3 style="color: #3087ea;">已提现</h3>
                        </li>
                    </ul>
                    <ul style="line-height: 50px;">
                        <li>
                            <h4 style="color: #000;">到账银行卡</h4>
                        </li>
                        <li>
                            <h4 style="color: #000;">建设银行 尾号 6930</h4>
                        </li>
                    </ul>
                </div>
            </van-step>
            <van-step style="height: 100px;">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <ul style="line-height: 50px;">
                        <li>
                            <h3 style="color: #d92109;">90元</h3>
                        </li>
                        <li>
                            <h3 style="color: #3087ea;">已提现</h3>
                        </li>
                    </ul>
                    <ul style="line-height: 50px;">
                        <li>
                            <h4 style="color: #000;">到账银行卡</h4>
                        </li>
                        <li>
                            <h4 style="color: #000;">建设银行 尾号 9999</h4>
                        </li>
                    </ul>
                </div>
            </van-step>
            <van-step style="height: 100px;">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <ul style="line-height: 50px;">
                        <li>
                            <h3 style="color: #d92109;">70元</h3>
                        </li>
                        <li>
                            <h3 style="color: #3087ea;">已提现</h3>
                        </li>
                    </ul>
                    <ul style="line-height: 50px;">
                        <li>
                            <h4 style="color: #000;">到账银行卡</h4>
                        </li>
                        <li>
                            <h4 style="color: #000;">建设银行 尾号 6666</h4>
                        </li>
                    </ul>
                </div>
            </van-step>
        </van-steps>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 使浏览器回到上一个访问的页面，实现类似于 “返回” 的功能
const onClickLeft = () => history.back();
const active = ref(0)
const moneyB = localStorage.getItem('moneyB')
</script>